<style include="cr-shared-style shared-style">
  :host {
    display: flex;
    flex: 1 0 100%;
    padding: 10px;
    width: 100%;
  }

  #controls {
    display: flex;
    flex: 2;
  }
</style>

<div class="column">
  <span class="emphasize">Quick action items.</span>  Note that the toggles and
  dropdowns reflect the current state of the feature status. They will update
  on their own if changed outside of this page.
</div>
<div id="controls">
  <div class="column label-top">
    <div class="cr-padded-text">
      Toggle Do Not Disturb
    </div>
    <cr-toggle checked="{{isDndEnabled_}}">
    </cr-toggle>
  </div>
  <div class="column label-top">
    <label>Select Find My Device status</label>
    <select id="findMyDeviceStatus" class="md-select"
        on-change="setFindMyDeviceStatus_">
      <template is="dom-repeat" items="[[findMyDeviceStatusList_]]">
        <option selected="[[isEqual_(item, findMyDeviceStatus_)]]">
          [[getFindMyDeviceStatusName_(item)]]
        </option>
      </template>
    </select>
  </div>
  <div class="column label-top">
    <label>Select tether status</label>
    <select id="tetherStatusList" class="md-select"
        on-change="setTetherStatus_">
      <template is="dom-repeat" items="[[tetherStatusList_]]">
        <option selected="[[isEqual_(item, tetherStatus_)]]">
          [[getTetherStatusName_(item)]]
        </option>
      </template>
    </select>
  </div>
</div>

